<script setup>
import {getProListFn,addProListFn,delProFn,editProFn,queryProListFn} from '@/api/home.js'
import {ref,reactive} from 'vue'
import { ElMessage } from 'element-plus'

const proList = ref([])

// 页码
const count = ref(1)

// 数据的总数
const length = ref(0)

function getData(){
  getProListFn({
  count: count.value,
  size: 10
}).then(res => {
  // console.log(res);
  proList.value = res.data
  length.value = res.length
})
}
// 默认获取数据
getData()

function changeCount(value){
  if(code.value == 10010){
    getData()
  }else {
  queryProListFn({
    proname: queryText.value,
    count: value,
    size: 10
  }).then(res => {
    // console.log(res);
    proList.value = res.data
    length.value = res.length
    code.value = 10086
  })
  }
  
}

// ------------- 增加 ------------------
const drawer = ref(false)
const formLabelAlign = ref({
  start: '☆☆☆☆☆',
  price: '',
  num: '',
  kind: '',
  addr: '',
  proname: '',
  img1: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/230742/32/2823/51634/65520517F4c4f8ffb/6b8d81f6664085c6.jpg!q70.dpg.webp',
  proid: '',
  info: '',
  time: '',
})

function addProClick(){
  formLabelAlign.value.proid = Math.random()
  formLabelAlign.value.time = new Date()


  addProListFn(formLabelAlign.value).then(res => {
    // console.log(res);
    if(res.code == 200){
      drawer.value = false
      getData()
    }
  })
}

// ---------------- 删除
function delClick({proid}){
  // console.log(proid);
  delProFn({
    proid
  }).then(res => {

     ElMessage({
        message: res.message,
        type: 'success',
      })

    if(res.code == 200){
      // 删除成功
      getData()
    }
  })
}
// ------------------- 编辑
const dialogVisible = ref(false)

function editClick(row){
  dialogVisible.value = true
  // console.log(row);
  // 
  const pro = JSON.parse(JSON.stringify(row))
  formLabelAlign.value = pro
}

function editProClick(){
  // console.log(formLabelAlign);
  editProFn(formLabelAlign.value).then(res => {

    dialogVisible.value = false
    // console.log(res);
    ElMessage({
        message: res.message,
        type: 'success',
      })

    if(res.code == 200){
      // 删除成功
      getData()
    }
  })
}
// ---------------------- 搜索功能 
const queryText = ref('')
const code = ref(10010)// 标记我们是否被查询过
function queryChange(){
  // console.log(queryText.value);
  queryProListFn({
    proname: queryText.value,
    count: 1,
    size: 10
  }).then(res => {
    // console.log(res);
    proList.value = res.data
    length.value = res.length
    code.value = 10086
  })
}
</script>

<template>
  <div>
    <div class="box">
      <el-button @click="drawer = true">增加</el-button>
      <el-input placeholder="请输入商品名称" v-model="queryText" @keydown.enter="queryChange" />
      <el-button >搜索</el-button>
    </div>
  <el-table :data="proList" style="width: 100%">
    <el-table-column type='index' label="序号" width="70" />
    <el-table-column prop="proname" label="商品名称" width="180" />
    <el-table-column prop="addr" label="货源" />
    <el-table-column prop="num" label="库存" />
    <el-table-column prop="price" label="价格" />
    <el-table-column prop="start" label="用户评价" />
    <el-table-column label="操作">
      <template #default="scope">
        
        <el-popconfirm @confirm="delClick(scope.row)" :title="'你确定要删除' + scope.row.proname + '吗?'">
        <template #reference>
          <el-button>删除</el-button>
        </template>
      </el-popconfirm>

        <el-button @click='editClick(scope.row)'>编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page='count' @current-change='changeCount' background layout="prev, pager, next" :total="length" />




 <el-drawer
    v-model="drawer"
    title="新增商品"
  >
    <el-form
    :model="formLabelAlign"
    style="max-width: 600px"
  >
    <el-form-item label="商品名称">
      <el-input v-model="formLabelAlign.proname" />
    </el-form-item>
    <el-form-item label="货源">
      <el-input v-model="formLabelAlign.addr" />
    </el-form-item>
    <el-form-item label="库存">
      <el-input v-model="formLabelAlign.num" />
    </el-form-item>
    <el-form-item label="价格">
      <el-input v-model="formLabelAlign.price" />
    </el-form-item>
    <el-form-item label="分类">
      <el-input v-model="formLabelAlign.kind" />
    </el-form-item>
<el-form-item label="详情">
      <el-input v-model="formLabelAlign.info" />
    </el-form-item>
     <el-form-item>
      <el-button type="primary" @click="addProClick">提交添加</el-button>
    </el-form-item>
  </el-form>

  </el-drawer>




<!-- -------------- -->
   <el-dialog
    v-model="dialogVisible"
    title="编辑商品信息"
    width="50%"
  >
   <el-form
    :model="formLabelAlign"
    style="max-width: 600px"
  >
    <el-form-item label="商品名称">
      <el-input v-model="formLabelAlign.proname" />
    </el-form-item>
    <el-form-item label="货源">
      <el-input v-model="formLabelAlign.addr" />
    </el-form-item>
    <el-form-item label="库存">
      <el-input v-model="formLabelAlign.num" />
    </el-form-item>
    <el-form-item label="价格">
      <el-input v-model="formLabelAlign.price" />
    </el-form-item>
    <el-form-item label="分类">
      <el-input v-model="formLabelAlign.kind" />
    </el-form-item>
<el-form-item label="详情">
      <el-input v-model="formLabelAlign.info" />
    </el-form-item>
     <el-form-item>
      <el-button type="primary" @click="editProClick">提交编辑</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>

  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: row;
}
</style>
